<template>
  <div class="equipmentParameters-page">
    <breadcrumb />
    <div class="search-container">
      <Search @search="getSearchParams" />
    </div>
    <div class="table-container">
      <div class="table-component">
        <Table :tableData="table.data" :loading="table.loading" @table="getTableParams" />
        <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="pagination.pageSizes"
            layout="total,sizes, prev, pager, next, jumper"
            :total="table.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, shallowRef } from "vue";
import breadcrumb from "@/components/breadcrumb/index.vue";
import Search from "./components/search.vue";
import Table from "./components/table.vue";
import { useRouter } from "vue-router";
const router = useRouter();

import { getGuideShowList } from "./request.js";

// 搜索
const searchModel = ref({
  name: "",
  hasGssData: "",
  rangeDate: [],
  startTime: "",
  endTime: "",
});

// 搜索操作
const getSearchParams = (value) => {
  // searchParams.value = value;
  searchModel.value = value;
  getData();
};

// table操作
const getTableParams = (value) => {
  // console.log("value ===>", value);
  if (value.operation === 1) {
    const list = {
      id: value.id,
      name: value.name,
    };
    router.push({
      path: "/road/gui/device/detail",
      query: {
        data: encodeURIComponent(JSON.stringify(list)),
      },
    });
  }
};

// 表格
const table = reactive({
  data: [],
  total: 0,
  loading: true,
});

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 30, 50],
});

const handleCurrentChange = (value) => {
  pagination.currentPage = value;
  getData();
};

const handleSizeChange = (value) => {
  pagination.pageSize = value;
  getData();
};

const getData = async () => {
  await getGuideShowList({
    name: searchModel.value.name,
    hasGssData: searchModel.value.hasGssData,
    startTime: searchModel.value.startTime,
    endTime: searchModel.value.endTime,
    pageNo: pagination.currentPage,
    pageSize: pagination.pageSize,
  }).then((res) => {
    if (res.data.code === 0) {
      table.data = res.data.result.items;
      table.total = parseInt(res.data.result.total);
      table.loading = false;
    }
  });
};

getData();
</script>

<style lang="less" scoped>
.equipmentParameters-page {
  .search-container {
    margin-top: 16px;
    min-height: 100%;
    padding: 24px 24px 8px 24px;
    background: #fff;
    border-radius: 6px;
  }
  .table-container {
    margin-top: 16px;
    min-height: 100%;
    padding: 24px;
    background: #fff;
    border-radius: 6px;
    .table-component {
      .pagination {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
  }
}
</style>
